{layout name="common/layout" /}
<link rel="stylesheet" type="text/css" href="__MERCHANT_STATIC__/style/css/jstree/style.min.css" />

<div class="dislpayArrow hidden-xs"><a class="pngfix" href="javascript:void(0);" onClick="displaynavbar(this)"></a></div>

<div class="Hui-article-box" style="margin-top: 37px;">
	<div class="newCrumbs ">物流模板
		<span class="c-gray en">&gt;</span> 运费模板
		<span class="c-gray en">&gt;</span> 添加运费模板
	</div>
	<div class="addfare_content">
		<form action="" >
			<div id="tab_demo">
				<div>
					<span class="">模板名称：</span>
					<input type="text" class="modal_name input-text radius size-M" id="freight-name">
				</div>
				<div style="margin-bottom:30px;">
					<span class="">区域选择：</span>
					<input class="" name="area-select" type="radio" value="1">全国包邮
					<input class="" name="area-select" type="radio" value="2">全国包邮（不包括新疆，西藏，内蒙古）
					<input class="" name="area-select" type="radio" value="3">部分地区包邮
				</div>
				<div style="display:none;margin-right:15px;" id="spetial-area">
					<table class="table table-te1 table-border table-bg  table-bordered">
						<tr class="text-c text-cs first-tr">
							<td style="width: 220px;">运送到</td>
							<td>首件（元）</td>
							<td>续件（元）</td>
						</tr>
						<tr style="height: 70px;" class="text-c">
							<td style="width: 220px;">新疆</td>
							<td><input type="text" class="first_pay input-text radius size-M edit" name="first-price"></td>
							<td><input type="text" class="xu_pay input-text radius size-M edit" name="again-price"></td>
						</tr>
						<tr style="height: 70px;" class="text-c">
							<td style="width: 220px;">西藏</td>
							<td><input type="text" class="first_pay input-text radius size-M edit" name="first-price"></td>
							<td><input type="text" class="xu_pay input-text radius size-M edit" name="again-price"></td>
						</tr>
						<tr style="height: 70px;" class="text-c">
							<td style="width: 220px;">内蒙古</td>
							<td><input type="text" class="first_pay input-text radius size-M edit" name="first-price"></td>
							<td><input type="text" class="xu_pay input-text radius size-M edit" name="again-price"></td>
						</tr>
					</table>
				</div>
				<div style="display:none;margin-right:15px;" id="slected-area">
					<table class="table table-te1 table-border table-bg  table-bordered" >
						<tr class="text-c text-cs first-tr">
							<td>包邮地区</td>
						</tr>
						<tr style="height: 70px;" class="text-c">
							<td id="slected-area-show"></td>
						</tr>
					</table>
				</div>
				<div class="addfare_btnList">
					<input type="button" onclick="sub()" class="btn" value="保存">
					<input type="button" class="btn" value="返回" style="margin-left: 20px;">
				</div>	
			</div>
		</form>
	</div>
	
	<div id="modal-demo"  class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content radius" style="width: 900px;">
				<div class="modal-header">
					<h3 class="modal-title" style="text-align: center;">快递配送区域</h3>
					<a class="close" data-dismiss="modal" aria-hidden="true" href="javascript:void();">×</a>
				</div>
				<div class="modal-body">
					<div class="wrrap">
						<div class="top"></div>
						<div class="content" style="overflow: hidden;" id="city-tree"></div>
					</div>
				</div>
				<div class="modal-footer">
					<span class="btn btn-primary" onclick="confirm()">确定</span>
					<button class="btn" data-dismiss="modal" aria-hidden="true">关闭</button>
				</div>
			</div>
		</div>
	</div>
</div>

<script src="__MERCHANT_STATIC__/style/js/jstree.min.js"></script>	
 <style>
	 
    .jstree-open > .jstree-anchor > .fa-folder:before {
        content: "\f07c";
    }
    .jstree-default .jstree-icon.none {
        width: 0;
    }
</style>
<script> 
$("input[value='返回']").click(function(){
	window.history.back();
});
	function confirm(){
		$("#modal-demo").modal("hide");
		//获取选中值
		var instance = $('#city-tree').jstree(true);
		console.log(instance.get_checked(true));
		var selectObj = instance.get_checked(true);
		var selectId = [], selectStr = '';
		for(var i=0, len=selectObj.length; i<len; i++) {
			if($.inArray(selectObj[i].parent, selectId) == -1){		
				selectId.push(selectObj[i].id);
				selectStr += selectObj[i].text + '，';
			}
		}
		$("#slected-area-show").text(selectStr.substr(0, selectStr.length-1));
		$("#slected-area").show();
	}
	
	function sub() {
		var freightName = $("#freight-name").val();
		if(freightName.length == 0) {
			$.Huimodalalert("请填写模板名称", 2000);
			return false;
		}
		var val = $('input[name="area-select"]:checked').val();
		if(val == 1) {
			$.post("{:url('freight/addExpress')}", {freight_name:freightName, freight_is_type:1}, function(res){
				if(res.status==1){
					location.href="{:url('index')}";
				} else {
					$.Huimodalalert(res.msg, 2000);
				}
			})
		} else if(val == 2) {
			var firstPrice = [];
			var againPrice = [];
			$("input[name='first-price']").each(function(){
				var price = $(this).val();
				if(!price || price == 0) {
					$.Huimodalalert("请补全价格信息", 2000);
					return;
				}
				firstPrice.push(price);
			});
			$("input[name='again-price']").each(function(){
				var price = $(this).val();
				if(!price || price == 0) {
					$.Huimodalalert("请补全价格信息", 2000);
					return;
				}
				againPrice.push(price);
			});
			if(firstPrice.length != 3 || againPrice.length != 3) {
				return false;
			}
			$.post("{:url('freight/addExpress')}", {freight_name:freightName, freight_is_type:2, firstPrice:firstPrice, againPrice:againPrice}, function(res){
				if(res.status==1){
					location.href="{:url('index')}";
				} else {
					$.Huimodalalert(res.msg);
				}
			})
		} else if(val == 3) {
			var instance = $('#city-tree').jstree(true);
			var selectObj = instance.get_checked(true);
			var selectId = [];
			for(var i=0, len=selectObj.length; i<len; i++) {
				//if($.inArray(selectObj[i].parent, selectId) == -1){		
					selectId.push(selectObj[i].id);
				//}
			}
			$.post("{:url('freight/addExpress')}", {freight_name:freightName, freight_is_type:3, selectId:selectId}, function(res){
				if(res.status==1){
					location.href="{:url('index')}";
				} else {
					$.Huimodalalert(res.msg, 2000);
				}
			})
		} else {
			$.Huimodalalert("请选择区域", 2000);
			return false;
		}
	}

	$(function(){
		$.Huitab("#tab_demo .tabBar span","#tab_demo .tabCon","current","click","0");
		$('#city-tree').jstree({
			'core' : {
				'data' : {
					"url" : "{:url('merchant/area/getCityTree')}",
					"dataType" : "json"
				}
			},
			'checkbox' : {
				//"keep_selected_style" : false,  //是否默认选中
				//"three_state" : false,  //父子级别级联选择
			},
			'plugins' : ["checkbox"],
		});
		
		$(":radio").click(function(){
			var val = $('input[name="area-select"]:checked').val();
			if(val == 1) {
				$("#spetial-area").hide();
				$("#slected-area").hide();
			} else if(val == 2) {
				$("#slected-area").hide();
				$("#spetial-area").show();
			} else if(val == 3) {
				$("#spetial-area").hide();
				$("#modal-demo").modal("show")
			}
		});
	});
</script>
